<template>
  <div class="Pintorder">
    <Pheader class="tou" msg="积分订单"></Pheader>
    <div class="pointsOrder">
      <jifenOrder
        v-for="(peo,index) in list "
        :key="index"
        :index="peo.id"
        :orderNumber="peo.orderNumber"
        :orderData="peo.orderData"
        :orderStatus="peo.orderStatus"
        :orderName="peo.orderName"
        :orderNorms="peo.orderNorms"
        :orderImg="imgSrc[index]"
        :orderNum="peo.orderNum"
        :orderScore="peo.orderScore"
      ></jifenOrder>
    </div>
    <div class="block">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage3"
        :page-size="pagesize"
        layout="prev, pager, next, jumper"
        :total="list.length"
      ></el-pagination>
      <span class="demonstration active2">跳转</span>
    </div>
    <div class="rightCon2">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
//头部小组件
import Pheader from "@/components/P_header.vue";
//引入积分组件
import jifenOrder from "@/components/jifenOrder.vue";
// 引入分页组件
// import pagination from "@/components/pagination.vue";

export default {
  components: {
    Pheader,
    jifenOrder,
    // pagination
  },
  data() {
    return {
      imgSrc: [],
      currentPage3: 1,
      pagesize: 3,
      currpage: 1,
      list: []
    };
  },
  created() {
    var _this = this;
    this.$axios({
      method: "post",
      url: "http://localhost:3000/recentlook/readorder",
      headers: {
        "Content-Type": "application/x-www-form-urlencoded"
      }
    })
      .then(response => {
        _this.list = response.data.result;
        _this.code = response.data.code;
        window.console.log(_this.list.length);
        for (var i = 0; i < _this.list.length; i++) {
          this.imgSrc.push(
            require("../assets/images/" + response.data.result[i].orderImg)
          );
        }
      })
      .catch(function(error) {
        _this.data = error;
      });
  },
  methods: {
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.pagesize = val;
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.currpage = val;
      var _this = this;
      this.$axios({
        method: "post",
        url: "http://localhost:3000/recentlook/orderpage",
        headers: {
          "Content-Type": "application/x-www-form-urlencoded"
        }
      })
        .then(response => {
          _this.list = response.data.result;
          _this.code = response.data.code;
        })
        .catch(function(error) {
          _this.data = error;
          window.console.log(_this.data);
        });
    }
  }
};
</script>

<style>
.Pintorder {
  width: 100%;
  /* height: 488px; */
  border: 1px solid #e7e7e7;
  /* margin-left:1%; */
  /* position: absolute;
  top: 0px;
  left: 0px; */
  background: #fff;
  position: relative;
}
.block {
  text-align: center;
  margin-bottom: 40px;
}
.rightCon2{
  position: absolute;
  top: 0;
  left:0;
  height:100%;
  /* display:inline-block; */
}
.pointsOrder {
  margin: 20px;
}
.demonstration {
  background: #f08200;
  display: inline-block;
  color: #fff;
  padding: 3px 9px;
  position: relative;
  top: 6px;
}
</style>
